<body onload="onLoad();" style="
margin: 0px;
overflow: hidden;
height: 100%;
width: 100%;
background-size: 100%;">

<script src='./js/thirdparty/jquery-3.3.1.min.js'></script>
<script src='./js/thirdparty/jquery-ui.min.js'></script>
<script src='./js/thirdparty/jquery-ui.css.js'></script>
<script src='./js/thirdparty/codemirror/codemirror.js'></script>
<script src='./js/thirdparty/codemirror/panel.js'></script>
<script src='./js/thirdparty/codemirror/buttons.js'></script>
<script src='./js/thirdparty/codemirror/codemirror.css.js'></script>
<script src='./js/thirdparty/codemirror/clike.js'></script>
<script src='./js/thirdparty/gif.js/gif.js'></script>
<script src='./js/thirdparty/gif.js/gif.worker.js'></script>
<script src='./js/thirdparty/three/three.min.js'></script>
<script src='./js/thirdparty/three/libs/stats.min.js'></script>
<script src='./js/thirdparty/three/libs/dat.gui.min.js'></script>
<script src='./js/thirdparty/three/controls/OrbitControls.js'></script>
<script src='./js/gl.js'></script>
<script src='./js/presets.js'></script>
<script src='./js/gui.js'></script>
<script src='./js/shaders.js'></script>
<script src='./js/renderer.js'></script>
<script src='./js/solver.js'></script>
<script src='./js/trinity.js'></script>

<div id='container' style='
position: relative;
margin: 0px;
padding: 0px;
'>
    <div id='gui' style='
    position:absolute;
    z-index:-2;
    '></div>

    <button class='toggle-code-button-class' id='toggle-code-button' style='
    position:absolute;
    z-index:1;
    border:none;
    top: 0px;
    display:inline-block;
    margin-left:5px;
    padding:8;
    outline:0;
    width: 10px;
    height: 10px;
    box-shadow:none!important;
    background:none;
    color: rgb(58, 227, 139);
    font-size:24px;
    '>&#9776</button>

    <style>
    .toggle-code-button-class:hover,
    .toggle-code-button-class:focus {
        color: rgb(192, 225, 208)!important;
        text-decoration: none;
        cursor: pointer;
    }
    </style>

    <textarea id="textarea-code" name="textarea-code">
    </textarea>

    <textarea id="textarea-errors" name="textarea-errors">
    </textarea>

    <div style='position:relative; pointer-events:none;'>
        <canvas id='render-canvas' style='
        position:relative;
        left: 0; top: 0;
        height: 100%;
        width: 100%;
        z-index:-10;
        pointer-events: none;
        '></canvas>
        <canvas id='text-canvas' style='
        position:absolute;
        left: 0; top: 0;
        height: 100%;
        width: 100%;
        z-index:-10;
        pointer-events: none;
        '></canvas>
    </div>
</div>

<script type="text/javascript">

var editor;
var error_editor;

function onLoad()
{
    let canvas = document.getElementById("render-canvas");
    GLU.setupGL(canvas);
    gl = GLU.gl;

    // Load CodeMirror and jquery-ui (for resizable) CSS rules
    var styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(codemirror_css_rules));
    styleElement.appendChild(document.createTextNode(jquery_ui_css_rules));
    document.getElementsByTagName('head')[0].appendChild(styleElement);

    // Set up CodeMirror instance for code editor:
    let code_textarea = document.getElementById("textarea-code");
    editor = CodeMirror(function(elt) {
        code_textarea.parentNode.replaceChild(elt, code_textarea);
    }, {
        lineNumbers: true,
        mode: "x-shader/x-fragment"
        ,
        buttons: [
            {
                label: 'common',
                callback: function (cm) {
                    let doc = trinity.getDoc('common');
                    editor.swapDoc(doc);
                }
            },
            {
                label: 'initial',
                callback: function (cm) {
                    let doc = trinity.getDoc('initial');
                    editor.swapDoc(doc);
                }
            },
            {
                label: 'inject',
                callback: function (cm) {
                    let doc = trinity.getDoc('inject');
                    editor.swapDoc(doc);
                }
            },
            {
                label: 'influence',
                callback: function (cm) {
                    let doc = trinity.getDoc('influence');
                    editor.swapDoc(doc);
                }
            },
            {
                label: 'collide',
                callback: function (cm) {
                    let doc = trinity.getDoc('collide');
                    editor.swapDoc(doc);
                }
            },
            {
                label: 'render',
                callback: function (cm) {
                    let doc = trinity.getDoc('render');
                    editor.swapDoc(doc);
                }
            }
        ]
    });
    $( function() {
        $(editor.getWrapperElement()).resizable();
    } );
    $(editor.getWrapperElement()).resizable({
        resize: function() {
            editor.setSize($(this).width(), $(this).height());
            editor.refresh();
        }
    });
    editor.setOption("theme", 'lucario');

    let code = '';
    editor.setValue(code);

    // Set up CodeMirror instance for error reports:
    let error_textarea = document.getElementById("textarea-errors");
    error_editor = CodeMirror(function(elt) {
        error_textarea.parentNode.replaceChild(elt, error_textarea);
    }, {
        lineNumbers: false,
        extraKeys: {"Ctrl-Space": "autocomplete"},
        viewportMargin: Infinity,
        mode: "x-shader/x-fragment",
        readOnly: true,
        autofocus: true
    });
    error_editor.setOption("theme", 'monokai');
    error_editor.setValue('');
    $(error_editor.getWrapperElement()).hide();

    // Instantiate Trinity
    trinity = new Trinity(editor, error_editor);

    // setup CodeMirror events
    var cmEl = document.querySelector('.CodeMirror');
    cmEl.addEventListener('mouseenter', function(e) {
        trinity.getCameraControls().enabled = false;
        trinity.editing = true;
    });
    cmEl.addEventListener('mousemove', function(e) {
        var edRect = cmEl.getBoundingClientRect();
        if (e.clientX >= edRect.left && e.clientX <= edRect.right &&
            e.clientY >= edRect.top  && e.clientY <= edRect.bottom)
        {
            trinity.getCameraControls().enabled = false;
            trinity.editing = true;
            return;
        }
        trinity.editing = false;
        trinity.getCameraControls().enabled = true;
    });
    cmEl.addEventListener('mouseleave', function(e) {
        trinity.getCameraControls().enabled = true;
        trinity.editing = false;
    });
    cmEl.addEventListener('keydown', function(e) {
        if (trinity.editing)
        {
            trinity.getCameraControls().enabled = false;
        }
        else
        {
            trinity.getCameraControls().enabled = true;
            e.codemirrorIgnore = true;
            e.preventDefault();
        }
    });

    // start animate loop
    animateLoop();
}

function animateLoop()
{
    trinity.runFrame();
    window.requestAnimationFrame(animateLoop);
}

$(document).ready(function()
{
    $('#div-code').hide();

    $("#toggle-code-button").click(function(){
        $(editor.getWrapperElement()).fadeToggle(1000);
    });
});

</script>

</body>
